<%@page import="com.nxu.entity.UserBean"%>
<%@page import="com.nxu.entity.BookBean"%>
<%@page import="java.util.List"%>
<%@page import="com.nxu.biz.impl.BooksBizImpl"%>
<%@page import="com.nxu.biz.BooksBiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
    // 权限检查
    UserBean user = (UserBean)session.getAttribute("user");
    if(user == null || user.getUserType() != 3) {
        response.sendRedirect("login.jsp");
        return;
    }

    // 分页处理
    int pageSize = 10;
    int currentPage = 1;
    String pageParam = request.getParameter("page");
    if(pageParam != null && !pageParam.isEmpty()) {
        currentPage = Integer.parseInt(pageParam);
    }
    
    BooksBiz biz = new BooksBizImpl();
    int totalCount = biz.getTotalCount();
    List<BookBean> books = biz.getBooksByPage(currentPage, pageSize);
    int totalPages = (int) Math.ceil((double)totalCount / pageSize);
%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>书香阁 - 商户书籍管理</title>
    <style>
        :root {
            --primary-color: #8d6e63;
            --danger-color: #d32f2f;
            --success-color: #388e3c;
            --light-gray: #f5f5f5;
            --dark-gray: #5a3921;
            --text-color: #333;
            --border-color: #d7ccc8;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                        url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center fixed;
            background-size: cover;
            color: var(--text-color);
        }
        
        .container {
            max-width: 1200px;
            margin: 20px auto;
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            backdrop-filter: blur(5px);
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .user-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .user-status {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .user-name {
            font-weight: bold;
            color: var(--dark-gray);
        }
        
        .logout-btn {
            padding: 8px 15px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .logout-btn:hover {
            background-color: #6d4c41;
            transform: translateY(-2px);
        }
        
        h1 {
            text-align: center;
            color: var(--dark-gray);
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--primary-color);
        }
        
        .page-info {
            margin: 15px 0;
            font-size: 16px;
            color: var(--dark-gray);
            text-align: right;
            font-weight: 500;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }
        
        th {
            background-color: var(--light-gray);
            font-weight: 600;
            color: var(--dark-gray);
        }
        
        tr:hover {
            background-color: rgba(141, 110, 99, 0.05);
        }
        
        .cover-cell {
            width: 80px;
        }
        
        .cover-img {
            width: 60px;
            height: 80px;
            object-fit: cover;
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .cover-img:hover {
            transform: scale(1.05);
        }
        
        .status-cell {
            width: 100px;
        }
        
        .action-cell {
            width: 150px;
        }
        
        .btn {
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            width: 80px;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        
        .btn-onshelf {
            background-color: var(--success-color);
            color: white;
        }
        
        .btn-onshelf:hover {
            background-color: #2e7d32;
            transform: translateY(-2px);
        }
        
        .btn-offshelf {
            background-color: var(--danger-color);
            color: white;
        }
        
        .btn-offshelf:hover {
            background-color: #c62828;
            transform: translateY(-2px);
        }
        
        .status-onshelf {
            color: var(--success-color);
            font-weight: bold;
        }
        
        .status-offshelf {
            color: var(--danger-color);
            font-weight: bold;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 5px;
        }
        
        .pagination a {
            color: var(--text-color);
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            transition: all 0.3s;
        }
        
        .pagination a.active {
            background-color: var(--primary-color);
            color: white;
            border: 1px solid var(--primary-color);
        }
        
        .pagination a:hover:not(.active) {
            background-color: #f0f0f0;
        }
        
        .pagination a i {
            font-size: 12px;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            th, td {
                padding: 8px 10px;
            }
            
            .cover-cell {
                width: 60px;
            }
            
            .cover-img {
                width: 50px;
                height: 70px;
            }
            
            .action-cell {
                width: 120px;
            }
            
            .btn {
                width: 70px;
                padding: 6px 10px;
                font-size: 13px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="user-info">
            <div class="user-status">
                <div class="user-avatar"><%= user.getUsername().substring(0, 1).toUpperCase() %></div>
                <span class="user-name">商户：<%= user.getUsername() %></span>
            </div>
            <button class="logout-btn" onclick="logout()">
                <i class="fas fa-sign-out-alt"></i> 退出登录
            </button>
        </div>
        
        <h1><i class="fas fa-store"></i> 书香阁 - 商户书籍管理</h1>
        
        <div class="page-info">
            共 <%= totalCount %> 本书 | 第 <%= currentPage %> 页/共 <%= totalPages %> 页
        </div>
        
        <table>
            <thead>
                <tr>
                    <th class="cover-cell">封面</th>
                    <th>ISBN</th>
                    <th>书名</th>
                    <th>价格</th>
                    <th class="status-cell">状态</th>
                    <th class="action-cell">操作</th>
                </tr>
            </thead>
            <tbody>
                <% for (BookBean book : books) { %>
                <tr>
                    <td class="cover-cell">
                        <img src="images/<%= book.getImagefile() %>" 
                             class="cover-img" 
                             alt="<%= book.getTitle() %>"
                             onerror="this.src='images/default-book.jpg'">
                    </td>
                    <td><%= book.getIsbn() %></td>
                    <td><%= book.getTitle() %></td>
                    <td>￥<%= String.format("%.2f", book.getPrice()) %></td>
                    <td class="status-<%= book.isActive() ? "onshelf" : "offshelf" %>">
                        <%= book.isActive() ? "已上架" : "已下架" %>
                    </td>
                    <td>
                        <% if(book.isActive()) { %>
                            <button class="btn btn-offshelf" onclick="changeStatus('<%= book.getIsbn() %>', false)">
                                <i class="fas fa-arrow-down"></i> 下架
                            </button>
                        <% } else { %>
                            <button class="btn btn-onshelf" onclick="changeStatus('<%= book.getIsbn() %>', true)">
                                <i class="fas fa-arrow-up"></i> 上架
                            </button>
                        <% } %>
                    </td>
                </tr>
                <% } %>
            </tbody>
        </table>

        <div class="pagination">
            <% if(currentPage > 1) { %>
                <a href="merchant.jsp?page=1"><i class="fas fa-angle-double-left"></i></a>
                <a href="merchant.jsp?page=<%= currentPage-1 %>"><i class="fas fa-angle-left"></i></a>
            <% } %>
            
            <% 
            int startPage = Math.max(1, currentPage - 2);
            int endPage = Math.min(totalPages, currentPage + 2);
            
            if(startPage > 1) { %>
                <a href="merchant.jsp?page=1">1</a>
                <% if(startPage > 2) { %>
                    <span>...</span>
                <% } 
            }
            
            for(int i=startPage; i<=endPage; i++) { %>
                <a href="merchant.jsp?page=<%= i %>" <%= i == currentPage ? "class='active'" : "" %>><%= i %></a>
            <% } 
            
            if(endPage < totalPages) { 
                if(endPage < totalPages - 1) { %>
                    <span>...</span>
                <% } %>
                <a href="merchant.jsp?page=<%= totalPages %>"><%= totalPages %></a>
            <% } %>
            
            <% if(currentPage < totalPages) { %>
                <a href="merchant.jsp?page=<%= currentPage+1 %>"><i class="fas fa-angle-right"></i></a>
                <a href="merchant.jsp?page=<%= totalPages %>"><i class="fas fa-angle-double-right"></i></a>
            <% } %>
        </div>
    </div>

    <script>
        function changeStatus(isbn, status) {
            if(confirm(status ? "确定要上架该书籍吗？" : "确定要下架该书籍吗？")) {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'updateBookStatus.jsp', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                
                xhr.onload = function() {
                    if (xhr.status === 200) {
                        if(xhr.responseText.trim() === 'success') {
                            alert('操作成功');
                            location.reload();
                        } else {
                            alert('操作失败: ' + xhr.responseText);
                        }
                    } else {
                        alert('请求失败: ' + xhr.status);
                    }
                };
                
                xhr.send('isbn=' + isbn + '&status=' + (status ? '1' : '0'));
            }
        }
        
        function logout() {
            if(confirm('确定要退出登录吗？')) {
                window.location.href = 'login.jsp';
            }
        }
    </script>
</body>
</html>